<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>附近门店</title>

    <style>
        img {
            width: 100%;
            height: 6em;
            margin-left: -20%;
        }
        .img {
            float: left;
            width: 35%;
        }
        .test {
            height: 90px;
        }
        li {
            list-style: none;
            border-bottom: 1px solid #e5e5e5;
            height: 7em;
        }
        h3 {
            margin-top: 10px;
            margin-bottom: 2%;
        }
        .phone{
            font-size: 0.95em;
            color: #2b2c2e9c;
        }
        .address{
            font-size: 0.95em;
            color: #2b2c2e9c;
        }
    </style>
    <script src="js/alert.js"></script>
</head>
<body style="background-color: #f1f1f1;margin: 0">
<div style="margin-top: 20px;background-color: #ffffff;padding-top: 1px;">

    <ul id="data">
        <!--<li><a href="123" style="text-decoration:none;color: #000000 ">
            <div class="img"><img src="img/123.png"></div>
            <div class="test">
                <h3>石家庄店</h3>
                <div class="phone">电话：85678831</div>
                <div class="address">地址：阿斯达四大阿萨德按上</div>
            </div>
        </a></li>

        <li><a>
            <div class="img"><img src="img/123.png"></div>
            <div class="test">
                <h3>石家庄店</h3>
                <div class="phone">电话：85678831</div>
                <div class="address">地址：阿斯达四大阿萨德按上</div>
            </div>
        </a></li>

        <li><a>
            <div class="img"><img src="img/123.png"></div>
            <div class="test">
                <h3>石家庄店</h3>
                <div class="phone">电话：85678831</div>
                <div class="address">地址：阿斯达四大阿萨德按上</div>
            </div>
        </a></li>-->

    </ul>
</div>

</body>
<script src="js/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
    var city;

    $(document).ready(function () {
        run()
    });

    function getstore() {
        $.ajax({
            "url": "/store/mystore/",
            "data":"city="+city,
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                var list = json.data;
                $("#data").empty();
                var url = window.location.host;
                for (var i=0;i<list.length;i++){

                    var html = '<li><a style="text-decoration:none;color: #000000" href="#{link}">' +
                        '            <div class="img"><img src="#{img}" alt="暂无图片"></div>' +
                        '            <div class="test">' +
                        '                <h3>#{name}</h3>' +
                        '                <div class="phone">电话：#{phone}</div>' +
                        '<div class="address">地址：#{address}</div>'+
                        '            </div>' +
                        '        </a></li>';

                    html = html.replace("#{link}",list[i].link);
                    //html = html.replace("#{img}",list[i].img);
                    html = html.replace("#{img}","http://"+url+":8080/img/"+list[i].account+"/"+list[i].name+".png");
                    html = html.replace("#{name}",list[i].name);
                    html = html.replace("#{phone}",list[i].phone);
                    html = html.replace("#{address}",list[i].address);
                    $("#data").append(html);
                }

            }
        })
    }

    function run() {
        var url = window.location.href;
        $.ajax({
            "url": "/wechat/weizhi/",
            "data": "uri=" + url,
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                var map = json.data;
                wxconfig(map);
            }
        })
    }

    function wxconfig(data) {

        wx.config({
            //debug: "false", // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名
            jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表
        });

        wx.error(function (res) {

        });

        wx.ready(function(){
            wx.getLocation({
                type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {
                    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    var speed = res.speed; // 速度，以米/每秒计
                    var accuracy = res.accuracy; // 位置精度

                    $.ajax({
                        url: "https://api.map.baidu.com/geocoder/v2/?ak=2GhAjyOSR2zqbv2o4MaMIEHY3ieP1ixC&callback=renderReverse&location=" + latitude + "," + longitude + "&output=json&pois=1",
                        type: "get",
                        dataType: "jsonp",
                        jsonp: "callback",
                        success: function (data) {
                            var province = data.result.addressComponent.province;
                            var cityname = (data.result.addressComponent.city);
                            var district = data.result.addressComponent.district;
                            var street = data.result.addressComponent.street;
                            var street_number = data.result.addressComponent.street_number;
                            var address = data.result.formatted_address;
                            city = cityname;
                            getstore();
                        }
                    });
                }
            });
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        });

    }
</script>
</html>